import React from 'react';
import { connect } from 'react-redux';
import { View, Text, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { sourceUrl } from '@/config';
import pTo from '@/images/common/rightIn.png';
import pFuzhi from '@/orderSubPack/images/order/fuzhi.png';
import pBox from '@/orderSubPack/images/order/fahuo.png';
import './index.scss';

const LogisticsList = ({ orderDetail = {} }) => {
  const handleCopy = (data) => {
    Taro.setClipboardData({
      data,
      complete: function () {
        Taro.showToast({ title: '复制成功', icon: 'none' });
      },
    });
  };
  const showTransDetai = (orderId, detailOrderId) => {
    let url =
      '/orderSubPack/logistics/index?orderId=' + orderId + '&detailOrderId=' + detailOrderId;
    Taro.navigateTo({ url });
  };
  return (
    <View className="logisticsListPage">
      {orderDetail.logisticsList?.length > 0 &&
        orderDetail.logisticsList.map((item) => (
          <View
            className="box flex-column black085 item"
            key={'logisticsItem' + item.id}
          >
            <View className="flex-row-spaceBetween-center">
              <View className="flex-row--center">
                <Image className="picon" src={pBox} />
                <Text className="txt32 bold customePageStyle">{item.statusName}</Text>
              </View>
              <View
                className="flex-row--center"
                onClick={() => showTransDetai(orderDetail.id, item.id)}
              >
                <Text className="txt24 black085">查看物流信息</Text>
                <Image className="rIcon" src={pTo} />
              </View>
            </View>
            <View className="flex-row--center mt20">
              <Text className="txt26 black085">{item.logisticsComName}</Text>
              <Text className="txt26 black085 mlr">{item.logisticsNum}</Text>
              <Image
                className="ficon"
                src={pFuzhi}
                onClick={() => {
                  handleCopy(item.logisticsNum);
                }}
              />
            </View>
            <View className="txt24 desc mt10">{item.desc}</View>
            {item.urls?.length > 0 && (
              <View className="flex-row mt20 proImgs">
                {item.urls.map((url, idx) => (
                  <Image
                    className="pImg"
                    src={url.indexOf('http') === 0 ? url : sourceUrl + url}
                    key={'pImg' + idx}
                  />
                ))}
              </View>
            )}
            <View className="txt24 black085 mt20">共{item.count}件商品</View>
          </View>
        ))}
    </View>
  );
};

export default connect(({ order }) => ({
  orderDetail: order.orderDetail,
}))(LogisticsList);
